<template>
	<view style="background-color: #112858;height: 100vh;width: 100%;">
		<view style="height: 20px;"></view>
		<view style='width: 90%;height: 30%;background-color: #0d4283;margin: auto;border-radius: 5px;'>
			<view style="height: 20px;"></view>
			<view class="clamp-view" v-if="postinfo.content != ''">
				{{postinfo.content}}
			</view>
			<view class="clamp-view" v-if="postinfo.file_data.length > 0">
				{{postinfo.file_data[0].filename}}
			</view>
			<view class="clamp-view" v-if="postinfo.file_img_num > 0">
				<image style="width: 50%;height: 100px;margin-left: 30rpx;filter: blur(8px);" :src="postinfo.file_img[0]"></image>
			</view>
			<view class="clamp-view" v-if="postinfo.file_video.length > 0">
				<video width="50%" height="100px" controls style="filter: blur(8px);">
				  <source :src="postinfo.file_video[0]" type="video/mp4">
				</video>
			</view>
			<view class="clamp-view" v-else>
				等待中...
			</view>
			<view style="width: 40%;height: 75rpx;background-color: #1362c3;margin: 100rpx auto 0;line-height: 75rpx;font-size: 30rpx;color: #fff;text-align: center;border-radius: 5px;" @click="login">
				登录后查看
			</view>
		</view>
	</view>
</template>

<script>
	import forum from '@/api/forum.js';
	export default {
		data() {
			return {
				category_type: '',//帖子类型
				id: '',//帖子id
				postinfo: [],//帖子内容
			}
		},
		onLoad(query) {
			this.id = query.id;
			this.category_type = query.category_type;
			console.log(this.category_type,111,this.id)
			this.getPostInfo()
		},
		methods: {
			//查询帖子详情
			getPostInfo(){
				forum.shareShow({
					id: this.id,
					category_type: 'plate',
				}).then(res => {
					this.postinfo = res.data.plateInfo
				})
			},
			login(){
				uni.redirectTo({
					url: '/pages/login/login?id='+this.id+'&category_type='+this.category_type
				})
			}
		}
	}
</script>

<style>
.clamp-view {
  width: 90%;
  margin: auto;
  font-size: 35rpx;
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  display: -webkit-box; /* 使用弹性盒子模型 */
  -webkit-box-orient: vertical; /* 设置方向为垂直 */
  -webkit-line-clamp: 2; /* 限制在2行内 */
  line-height: 1.5; /* 设置行高，确保文本不会挤在一起 */
  max-height: calc(35rpx * 1.5 * 2); /* 计算最大高度，确保不会超过两行 */
  color: #fff;
}
</style>
